<%@page import="acceso.util.Sesion"%>
<%@page import="wf.dto.geocon.GeoconDto"%>
<%@page import="acceso.util.Escritor"%>
<%@page import="acceso.util.WorkflowUtil"%>
<%@page language="java" contentType="text/html;" %> 
<%@page import="wf.dto.ContenedorDto"%>
<%@ page import="javax.servlet.jsp.*,   
                 javax.servlet.jsp.tagext.*,   
                 java.io.*,   
                 java.util.zip.*" %>  
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<%
    
    response.setHeader("Cache-Control","no-cache");
    response.setHeader("Cache-Control","no-store"); 
    response.setHeader("Cache-Control","must-revalidate");
    response.setHeader("Pragma","no-cache");
    response.setDateHeader("Expires", (new java.util.Date()).getTime());
 
    System.out.println("comenzando a convertir");
    Object o = session.getAttribute("c"+request.getParameter("id_frawor"));
    GeoconDto geoconten = null;
    if(o instanceof GeoconDto){
        System.out.println("tipo: gps");
        geoconten = (GeoconDto) o;
    }else{
        System.out.println("tipo: frawor");
    }
    request.setAttribute("geoconten", geoconten);
    

%> 
<html>
    <head>
        <!--<title>${geoconten.no_geocon}</title>-->
        <link rel="shortcut icon" href="../img/georeferencia.png">
        <!--script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=es&language=ES&libraries=geometry"></script>
        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel.js"></script>
        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel.js"></script>
        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script-->
        
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDg4xbpoZpkAzpgAZNTlP5XcFSzVEEU6ww&sensor=false"></script>

         
       
        
        <script type="text/javascript" src="../js/geoutil.js"></script>
        <script type="text/javascript">
            
            var accion = 0;
            var map;
            var ti_puncol;
            var size_marker='0.3';
            
            var lat ;
            var lng ;
            
            var edicion = false;
            var id_area = "";
                    
            var area_polilinea;
            var area_poligono;
            
            var area_polilinea;
            var markers =[];
            var markers_creditos =[];
            var poli_areas=[];
                    
            var punto_selec="";
            
            var t_p = [];
            
            var infowindow = new google.maps.InfoWindow();
            
            var pestado = false;//estado de la barra lateral derecha
            
            var g_markers = []; //Arrays de todos los markers del maps
            var g_labels_p = []; //Arrays de todos los labels del maps sobre los puntos
            var g_labels = []; //Arrays de todos los labels del maps sobre las lineas
            var g_lineas = []; //Arrays de todos las lineas del maps
            
            
            function initialize(){
                var latlng = new google.maps.LatLng("-12.16263412211394","-76.94184830700681");
                var maptype;
                if('${geoconten.ti_geovis}' == 'M'){
                    maptype = google.maps.MapTypeId.ROADMAP
                }else if('${geoconten.ti_geovis}' == 'S'){
                    maptype = google.maps.MapTypeId.HYBRID
                }
                var Options = {
                    zoom: ${geoconten.nu_geoace},
                    center: latlng,
                    mapTypeId: maptype,
                    panControl: false,
                    zoomControl: true,
                    zoomControlOptions: {
                        position: google.maps.ControlPosition.LEFT_CENTER
                    },
                    scaleControl: false,
                    mapTypeControl : true,
                    mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                        position: google.maps.ControlPosition.RIGHT_TOP
                    }


                };
                lat = latlng.lat();
                lng = latlng.lng();

                map = new google.maps.Map(document.getElementById("map_canvas"),Options);
                
                map.controls[google.maps.ControlPosition.TOP_RIGHT].push(document.getElementById("wg_main_head-1"));
                map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(document.getElementById("wg_main_body-1"));
                //map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(document.getElementById("wg_main_menu"));
                document.getElementById("wg_main_body-1").style.display="none";
                google.maps.event.addListener(map, 'zoom_changed', mzoon_changed);

            }
            
            function mzoon_changed(){
                //console.log("-->"+map.getZoom());
                switch(map.getZoom()){
                    case 0:{
                            g_markers_change_size('0.05');
                            size_marker = '0.05';
                            break;}
                    case 1:{
                            g_markers_change_size('0.10');
                            size_marker = '0.10';
                            break;}
                    case 2:{
                            g_markers_change_size('0.12');
                            size_marker = '0.12';
                            break;}
                    case 3:{
                            g_markers_change_size('0.13');
                            size_marker = '0.13';
                            break;}
                    case 4:{
                            g_markers_change_size('0.14');
                            size_marker = '0.14';
                            break;}
                    case 5:{
                            g_markers_change_size('0.15');
                            size_marker = '0.15';
                            break;}
                    case 6:{
                            g_markers_change_size('0.16');
                            size_marker = '0.16';
                            break;}
                    case 7:{
                            g_markers_change_size('0.17');
                            size_marker = '0.17';
                            break;}
                    case 8:{
                            g_markers_change_size('0.18');
                            size_marker = '0.18';
                            break;}
                    case 9:{
                            g_markers_change_size('0.19');
                            size_marker = '0.19';
                            break;}
                    case 10:{
                            g_markers_change_size('0.20');
                            size_marker = '0.20';
                            break;}
                    case 11:{
                            g_markers_change_size('0.25');
                            size_marker = '0.25';
                            break;}
                    case 12:{
                            g_markers_change_size('0.30');
                            size_marker = '0.30';
                            break;}
                    case 13:{
                            g_markers_change_size('0.40');
                            size_marker = '0.40';
                            break;}
                    case 14:{
                            g_markers_change_size('0.42');
                            size_marker = '0.42';
                            break;}
                    case 15:{
                            g_markers_change_size('0.44');
                            size_marker = '0.44';
                            break;}
                    case 16:{
                            g_markers_change_size('0.46');
                            size_marker = '0.46';
                            break;}
                    case 17:{
                            g_markers_change_size('0.48');
                            size_marker = '0.48';
                            break;}
                    case 18:{
                            g_markers_change_size('0.50');
                            size_marker = '0.50';
                            break;}
                    case 19:{
                            g_markers_change_size('0.52');
                            size_marker = '0.52';
                            break;}
                    case 20:{
                            g_markers_change_size('0.54');
                            size_marker = '0.54';
                            break;}
                    case 21:{
                            g_markers_change_size('0.56');
                            size_marker = '0.56';
                            break;}
                }
            }
            
            
            
            function p_cargapuntos(){
                <c:forEach items="${geoconten.l_geopun}" var="geopun">
                    var latlng = new google.maps.LatLng(${geopun.nu_geolat},${geopun.nu_geolon});
                    var mid = g_markers.length;
                    g_markers[mid] = new google.maps.Marker({
                        id : ${geopun.id_pungeo},
                        position: latlng,
                        map: null,
                        animation: google.maps.Animation.DROP,
                        draggable: false
                    });
                    
                    //new MarkerLight(latlng, {image: "red_dot.png"})
                    
                    t_p[t_p.length] =new google.maps.LatLng(${geopun.nu_geolat},${geopun.nu_geolon});
                    //google.maps.event.addListener(punto, 'click', infopunto);
                    google.maps.event.addListener(g_markers[g_markers.length-1], 'click', ponclick);
                    google.maps.event.addListener(g_markers[g_markers.length-1], 'mouseover', pmouseover);
                    google.maps.event.addListener(g_markers[g_markers.length-1], 'mouseout',pmouseout);
                    
                    /*var mid2 = g_labels_p.length;
                    g_labels_p[mid2] = new MapLabel({
                        id : ${geopun.id_pungeo},
                        position: latlng,
                        //map: map,
                        fontSize: 10,
                        align: 'center'
                        });
                    g_labels_p[mid2].setMap(map); */
                    
                </c:forEach>
            }
            
            function p_cambiarpuntos(l_cfg){
                for(var i=0; i<g_markers.length; i++){
                    
                    var marker = g_markers[i];
                    var cfg = "";
                    
                    
                    for(var j=0; j<l_cfg.length; j++){
                        if(marker.id == l_cfg[j].id.id_pungeo){
                            cfg = l_cfg[j];
                            break;
                        }
                    }
                    
                    if(cfg != ""){
                        marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_spin&chld="+size_marker+"|0|"+ti_puncol+"|8|_|");
                        marker.setMap(map);
                        marker.no_coment = cfg.no_pundes;
                        marker.no_colore = ti_puncol;
                        
                        var label;
                        
                        /*for(var j=0; j<g_labels_p.length; j++){
                            if(g_labels_p[j].id == cfg.id.id_pungeo){
                                label = g_labels_p[j];
                                break;
                            }
                        }

                        label.text = cfg.no_punlab;
                        label.fontColor = ti_puncol;*/
                    }  
                }
            }
            
            function p_ocultarpuntos(l_cfg){
                for(var i=0; i<g_markers.length; i++){
                    
                    var marker = g_markers[i];
                    var cfg = "";
                    
                    
                    for(var j=0; j<l_cfg.length; j++){
                        if(marker.id == l_cfg[j].id.id_pungeo){
                            cfg = l_cfg[j];
                            break;
                        }
                    }
                    
                    if(cfg != ""){
                        marker.setMap(null);
                    }
                }
                
            }
            
            function limpiar_markers(){
                for(var i=0; i<g_markers.length; i++){
                    g_markers[i].setMap(null);
                }
            }
            
            /*
             *FUNCION QUE GENERA EL PUNTO CENTRAL DE TODOS LOS PUNTOS
             **/
            function punto_central(){
                var bounds = new google.maps.LatLngBounds();            
                for(var i=0;i<t_p.length;i++){
                    bounds.extend(t_p[i]);
                }
                var center_tot = bounds.getCenter();
                map.setOptions({center: center_tot});
            }
            /*
             *FUNCION QUE GENERA EL PUNTO MEDIO DE DOS LOS PUNTOS
             **/
            function punto_medio(p_i, p_f){
                var bounds = new google.maps.LatLngBounds();            
                bounds.extend(p_i);
                bounds.extend(p_f);
                
                var p_m = bounds.getCenter();
                return p_m;
            }
            
            function infopunto(event){
                console.log(">1"+event);
                console.log(">2["+this.no_coment+"]");
                console.log(">4["+event.latLng+"]");
                infowindow.setContent(this.no_coment);
                infowindow.setPosition(event.latLng);
                infowindow.open(map);

            }
            
            function ponclick(event){
                if(!pestado){
                    pestado = true;
                }else{
                    pestado = false;
                }
                
            }
            
            function lmouseover(event){
                console.log("0["+event+"]");
                console.log("1["+this.id+"]");
                console.log("2["+this.strokeColor+"]");
                console.log("3["+this.strokeOpacity+"]");
                console.log("4["+this.strokeWeight+"]");
                console.log("5["+this.fillColor+"]");
                console.log("6["+this.fillOpacity+"]");
                //console.log("2["+this.getstrokeColor()+"]");
                //console.log("3["+this.getstrokeOpacity()+"]");
                //console.log("4["+this.getstrokeWeight()+"]");
                this.setOptions({
                        strokeOpacity: 1,
                        strokeWeight:(this.strokeWeight+1)
                    });
                document.getElementById("wg_main_body-1a-t2").innerHTML = this.no_coment;
                document.getElementById("wg_main_body-1a-t").style.backgroundColor = this.strokeColor;
                document.getElementById("wg_main_body-1a-t1").innerHTML = 'Distancia';
                document.getElementById("wg_main_body-1").style.right = -300;
                document.getElementById("wg_main_body-1").style.display="block";
                
                var mph = document.getElementById('wg_main').offsetHeight;
                var mph1 = document.getElementById('wg_main_body-1').offsetHeight;
                document.getElementById("wg_main_body-1").style.top = ""+((mph - mph1)/2)+"px";
                console.log("mph:"+mph+",mph1:"+mph1+" -->((mph - mph1)/2)"+((mph - mph1)/2));
                document.getElementById("wg_main_body-1").style.right = 0;
                //map.controls[google.maps.ControlPosition.RIGHT_CENTER].clear();
                //map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(document.getElementById("wg_main_body-1"));
                g_labels[this.id].setOptions({map: map, fontSize: map.getZoom()});
                
            }
            
            function lmouseout(event){
                this.setOptions({
                        strokeOpacity: 0.7,
                        strokeWeight:(this.strokeWeight-1)
                    });
                document.getElementById("wg_main_body-1").style.display="none";
                pestado = false;
                //document.getElementById("wg_main_body-1a-t1").innerHTML = '';
                //document.getElementById("wg_main_body-1a-t2").innerHTML = '';
                g_labels[this.id].setOptions({map: null});
            }
            
            function pmouseover(event){
                document.getElementById("wg_main_body-1a-t2").innerHTML = this.no_coment;
                document.getElementById("wg_main_body-1a-t").style.backgroundColor = this.strokeColor;
                document.getElementById("wg_main_body-1a-t1").innerHTML = 'Punto';
                document.getElementById("wg_main_body-1").style.right = -300;
                document.getElementById("wg_main_body-1").style.display="block";
                
                var mph = document.getElementById('wg_main').offsetHeight;
                var mph1 = document.getElementById('wg_main_body-1').offsetHeight;
                document.getElementById("wg_main_body-1").style.top = ""+((mph - mph1)/2)+"px";
                console.log("mph:"+mph+",mph1:"+mph1+" -->((mph - mph1)/2)"+((mph - mph1)/2));
                document.getElementById("wg_main_body-1").style.right = 0;
                //map.controls[google.maps.ControlPosition.RIGHT_CENTER].clear();
                //map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(document.getElementById("wg_main_body-1"));
                
            }
            
            function pmouseout(event){
                if(!pestado){
                    document.getElementById("wg_main_body-1").style.display="none";
                }
                //document.getElementById("wg_main_body-1a-t1").innerHTML = '';
                //document.getElementById("wg_main_body-1a-t2").innerHTML = '';
            }
            
            
            function g_markers_change_size(new_size){
                for(var i = 0 ; i < g_markers.length ; i++){
                    g_markers[i].setIcon("http://chart.apis.google.com/chart?chst=d_map_spin&chld="+new_size+"|0|"+g_markers[i].no_colore+"|8|_|");
                }
            }
            
            function cambio_capa(node, id_frawor){
                var js = getjsonfromurl(new getXMLObject(), "../wgp?xact=1&id_frawor="+id_frawor+"&nu_geocap="+node.options[node.selectedIndex].value);
                var capval = document.getElementById("subcapas");
                capval.innerHTML = "";
                for(var i=0; i<js.length;i++){
                    
                    
                    var tr = document.createElement("tr");
                    var td = document.createElement("td");
                    td.innerHTML = js[i].no_geocapval+"&nbsp("+js[i].l_punCap.length+")";
                    tr.appendChild(td);
                    
                    td = document.createElement("td");
                    var check = document.createElement("input");
                    check.type = "checkbox";
                    check.value = js[i].id.nu_geocapval;
                    check.setAttribute("onchange", "cambio_puntos(this, '"+id_frawor+"', '"+js[i].ti_puncol+"');");
                    td.appendChild(check);
                    tr.appendChild(td);
                    
                    td = document.createElement("td");
                    var div = document.createElement("div");
                    div.style.width = "10px";
                    div.style.height = "10px";
                    div.style.backgroundColor = js[i].ti_puncol;
                    div.style.display = "inline-block";
                    td.appendChild(div);
                    tr.appendChild(td);
                    
                    capval.appendChild(tr);
                }
                document.getElementById("wg_main_body-1").style.display="none";
            }
            
            function cambio_puntos(node, id_frawor, color){
                //alert(node.checked);
                var nu_geocap = document.getElementById("cbo_capas").options[document.getElementById("cbo_capas").selectedIndex].value;
                var l_cfg = getjsonfromurl(new getXMLObject(), "../wgp?xact=2&id_frawor="+id_frawor+"&nu_geocap="+nu_geocap+"&nu_geocapval="+node.value);
                ti_puncol = color;
                if(node.checked){
                    p_cambiarpuntos(l_cfg);
                }else{
                    p_ocultarpuntos(l_cfg);
                }
                
                
                
            }
            
            function mostrar_all_markers(){
                var checks = document.getElementById("subcapas").getElementsByTagName("input");
                for(var i=0; i<checks.length; i++){
                    checks[i].checked = true;
                    checks[i].onchange();
                }
                
            }
            
        </script>
        <link rel="stylesheet" type="text/css" href="../css/online4.4.css"/>
        <!--link rel="stylesheet" type="text/css" href="../css/contenedor.css"/-->
        <!--link rel="stylesheet" type="text/css" href="../css/wf2.0.7.6.css"/-->
        <link rel="stylesheet" type="text/css" href="../css/geoconten.css"/>
        
    </head>
    <body onload="initialize();p_cargapuntos();punto_central(); mostrar_all_markers()" style="margin: 0px;">
        <div id="wg_main">
            <div id="map_canvas" style="width: 100%; height: 100%"></div>
        </div>
        
        <div id="wg_main_head-1">
            <div id="wg_main_head-1a">
                <table border="0" style="width:100%;height: 100%;" >
                    <tr>
                        <td style="width: 20%;text-align: left" >
                        </td>
                        <td style="text-align: center">
                            <div>
                                <label style="color: #073362; font-family: Arial,Verdana,Tahoma; font-size: 13px; font-weight: bold;">${geoconten.no_geocon}</label>
                            </div>
                        </td>
                        <td style="width: 20%;text-align: right" >
                            <div>   
                                <label style="font-size: 12px;color: #2C79B3;height: auto;margin: 0px; padding: 0px;">${sUser}</label>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
                            
        <div id="wg_main_menu">
            <div id="wg_main_menu-1">
                <table border="0" style="width:100%;height: 100%;font-family: Arial,sans-serif; font-weight: bold; font-size: 13px" >
                    <tr>
                        <td style="width: 20%;text-align: left" >
                            Capas:
                        </td>
                        <td style="text-align: center">
                            <select id="cbo_capas" class="select_capa" onchange="cambio_capa(this,'${param.id_frawor}'), limpiar_markers(), mostrar_all_markers()">
                                <c:forEach var="c" items="${geoconten.l_capas}">
                                    <option value="${c.id.nu_geocap}">${c.no_geocap}</option>
                                </c:forEach>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <table style="text-align: left; font-size: 10px; width: 100%" id="subcapas">
                                <c:forEach var="v" items="${geoconten.l_capas[0].l_capVal}">
                                    <tr>
                                        <td>${v.no_geocapval}&nbsp(${fn:length(v.l_punCap)})</td>
                                        <td><input type="checkbox" value="${v.id.nu_geocapval}" onchange="cambio_puntos(this,'${param.id_frawor}','${v.ti_puncol}')"></td>
                                        <td><div style="width: 10px; height: 10px; background-color: ${v.ti_puncol}; display: inline-block"></div></td>
                                    </tr>
                                </c:forEach>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
                            
        <div id="wg_main_body-1">
            <div id="wg_main_body-1a">
                <table border="0" style="width:100%;height: 100%;" >
                    <tr>
                        <td id="wg_main_body-1a-t" style="width:20px;text-align: center;background-color: white">
                        </td>
                        <td style="text-align: center">
                            <div>
                                <label id="wg_main_body-1a-t1" style="color: #073362; font-family: Arial,Verdana,Tahoma; font-size: 13px; font-weight: bold;"></label>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 100px;text-align: center" colspan="2">
                            <div>
                                <label id="wg_main_body-1a-t2" style="font-size: 12px;color: #2C79B3;height: auto;margin: 0px; padding: 0px;">${sUser}</label>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </body>
</html>